<div style="padding: 30px;" class="layui-form seller-alone-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>规则名称：</label>
        <div class="layui-input-inline seller-inline-5">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入规则名称" autocomplete="off" class="layui-input">
        </div>
    </div>
  
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>设备类型：</label>
        <div class="layui-input-inline seller-inline-3">
            <select name="cat_id" id="cat_id" lay-filter="cat_id" lay-verify="required">
                <option value="">请选择设备类型</option>
                {volist name='cat_id' id='vo'}
                    <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>设备品牌：</label>
        <div class="layui-input-inline seller-inline-3">
            <select name="brand_id" id="brand_id" lay-filter="brand_id" lay-verify="required">
                <option value="">请选择设备品牌</option>
                {volist name='brand_id' id='vo'}
                    <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
   
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>使用场景：</label>
        <div class="layui-input-inline seller-inline-3">
            <select name="type_id" id="type_id" lay-filter="type_id" lay-verify="required">
                <option value="">请选择使用场景</option>
                {volist name='type_id' id='vo'}
                    <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>费用类型：</label>
        <div class="layui-input-inline seller-inline-3">
            <select name="fee_type" id="fee_type" lay-filter="fee_type" lay-verify="required">
                <option value="">请选择费用类型</option>
                {volist name='fee_type' id='vo'}
                    <option value="{$vo.name}">{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    
    <div class="layui-form-item">
        <label class="layui-form-label" ><i class="required-color">*</i>计费参数：</label>
        <div class="layui-input-inline seller-inline-3">
            <select name="fee_name" id="fee_name" lay-verify="required">
                <option value="">请选择计费参数</option>
                {volist name='fee_name' id='vo'}
                    <option value="{$vo.name}">{$vo.name}</option>
                {/volist}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>金额：</label>
        <div class="layui-input-inline seller-inline-2">
            <input type="text" name="money" required lay-verify="required" autocomplete="off" placeholder="请输入金额" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><i class="required-color">*</i>排序：</label>
        <div class="layui-input-inline seller-inline-2">
            <input type="text" name="sort" value="{$info.sort}" required lay-verify="required" placeholder="数值越小越靠前" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            {:zlserverToken()}
            <button id="fee_template_add_save" type="button" class="layui-btn" lay-submit lay-filter="save">保存</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</div>
<script>
    layui.use(['form','table'], function(){
        var $ = layui.$,form = layui.form,table = layui.table;
        var feeList;
        var feeIndex;
        //监听提交
        form.render(); 
 
        // 设备类型改变需要清空所有内容
        form.on('select(cat_id)', function(data){
            $("#brand_id").val('');
            $("#type_id").val('');
            $("#fee_type").empty();
            $("#fee_name").empty();
 
            $("#fee_type").append("<option value=''>请选择费用类型</option>"); 
            $("#fee_name").append("<option value=''>请选择计费参数</option>");
            form.render("select");
        });
   
        // 设备类型改变需要清空所有内容
        form.on('select(brand_id)', function(data){
            $("#type_id").val('');
            $("#fee_type").empty();
            $("#fee_name").empty();
 
            $("#fee_type").append("<option value=''>请选择费用类型</option>"); 
            $("#fee_name").append("<option value=''>请选择计费参数</option>");
            form.render("select"); 
        });

        // 设备类型改变需要清空所有内容
        form.on('select(type_id)', function(data){
            $("#fee_type").empty();
            $("#fee_name").empty();
 
            $("#fee_type").append("<option value=''>请选择费用类型</option>"); 
            $("#fee_name").append("<option value=''>请选择计费参数</option>");
            form.render("select"); 
            
            // 判断是否类型和品牌都已选择完毕 
            var cat_id = $('select[name=cat_id] option:selected').val();
            var brand_id = $('select[name=brand_id] option:selected').val();
            var type_id = $('select[name=type_id] option:selected').val();
         
            // 请求设备参数
            if(cat_id != '' && brand_id != '') {
                $.ajax({
                    type: 'post',
                    url: '{:url("FeeTemplate/getFeeTemplateOptions")}',
                    data: {
                        "cat_id": cat_id,
                        "brand_id": brand_id,
                        "type_id": type_id
                    },
                    dataType: 'json',
                    success: function (e) { 
                        if(e.status === true){ 
                            $("#fee_type").empty();
                            feeList = e.data.fee;
                            // 循环把结果添加到下拉列表中
                            $("#fee_type").append("<option value=''>请选择费用类型</option>");
                            for(var i = 0; i < e.data.fee.length; i++) {
                                $("#fee_type").append("<option value="+e.data.fee[i].name+">"+e.data.fee[i].name+"</option>");
                            }

                            $("#fee_name").empty();
                            $("#fee_name").append("<option value=''>请选择计费参数</option>");
                            form.render("select");
                        }else{
                            layer.msg(e.msg, {time: 1300});
                        }
                    }
                });
            }
        });

        // 设备类型改变需要清空所有内容
        form.on('select(fee_type)', function(data){
            var fee_type_name = $('select[name=fee_type] option:selected').val();

            for(var i = 0; i < feeList.length; i++) {
                if(feeList[i].name == fee_type_name) {
                    for(var j = 0; j < feeList[i].value.length; j++) { 
                        $("#fee_name").append("<option value="+feeList[i].value[j].name+">"+feeList[i].value[j].name+"</option>");
                    }
                }
            }
            form.render("select");
        });
  
        //保存规则
        form.on('submit(save)', function(data){
            formData = data.field;
            if(!formData){
                layer.msg('请先完善数据', {time: 1300});
                return false;
            }
 
            $("#fee_template_add_save").addClass("layui-btn-disabled");
            $('#fee_template_add_save').attr("disabled", true);

            $.ajax({
                type: 'post',
                url: '{:url("FeeTemplate/add")}',
                data: formData,
                dataType: 'json',
                success: function (e) { 
                    if(e.status === true){ 
                        layer.open({
                            type: 1
                            ,offset: 'auto'
                            ,id: 'layerDemoAuto'
                            ,content: '<div style="padding: 20px 100px;">'+ e.msg +'</div>'
                            ,btn: '关闭'
                            ,btnAlign: 'c' //按钮居中
                            ,shade: 0.3 //显示遮罩
                            ,yes: function(){
                                parent.layui.admin.events.changeTabAndRefresh('/manage/feeTemplate/index.html');
                            },close: function() {
                                console.log('close');
                            },end: function () {
                                parent.layui.admin.events.changeTabAndRefresh('/manage/feeTemplate/index.html');
                            }
                        });
                    }else{
                        $("#fee_template_add_save").removeClass("layui-btn-disabled");
                        $('#fee_template_add_save').removeAttr("disabled");

                        layer.msg(e.msg, {time: 1300});
                    }
                }
            });
            return false;
        });
    });

    function goods_list()
    {
        JsGet("{:url('FeeTemplate/getGoods')}",function(e){
            if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                layer.msg(e.msg); return false;
            }

            window.box = layer.open({
                type: 1,
                content: e,
                area: ['700px', '450px'],
                title:'商品列表'
            });
        });
    }

    function article_list()
    {
        JsGet("{:url('FeeTemplate/getArticle')}",function(e){
            if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                layer.msg(e.msg); return false;
            }

            window.box = layer.open({
                type: 1,
                content: e,
                area: ['700px', '450px'],
                title:'文章列表'
            });
        });
    }

    function article_type_list()
    {
        JsGet("{:url('FeeTemplate/getArticleType')}", function(e){
            if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                layer.msg(e.msg); return false;
            }

            window.box = layer.open({
                type: 1,
                content: e,
                area: ['700px', '450px'],
                title: '文章分类列表'
            })
        })
    }


    function form_list()
    {
        JsGet("{:url('FeeTemplate/getForm')}",function(e){
            if ((e.hasOwnProperty('status') && !e.status) || (e.hasOwnProperty('code') && e.code == 0)) {
                layer.msg(e.msg); return false;
            }

            window.box = layer.open({
                type: 1,
                content: e,
                area: ['700px', '450px'],
                title:'表单列表'
            });
        });
    }


</script>